<template>
  <view class="myInviteTeachers-page">
    <head-box></head-box>
    <view class="myInviteTeachers_select">
      <label class="myInviteTeachers_select-lable">活动种类：</label>
      <picker
        class="myInviteTeachers_select_item"
        @change="incomeChangePicker"
        :value="incomeIndex"
        :range="incomeArr"
      >
        <view class="uni-input _choose-type-text">
          {{ incomeArr[incomeIndex] }}
          <image class="drop-dowm-img" src="../../static/img/drop-down.png" mode=""></image>
        </view>
      </picker>
    </view>
    <view class="myInviteTeachers-page-main tab-botton">
      <view class="myInviteTeachers-page-main-item" v-for="(item, index) in list" :key="index"
            @click="onRouter(item)"
      >
        <view class="myInviteTeachers-page-main-item-header">
          <view class="_item-header-title"
            ><text>{{ item.moveTitle }}</text></view
          >
        </view>

        <view class="myInviteTeachers-page-main-item-content">
          <view class="myInviteTeachers-page-main-item-content-inner">
            <view class="_content-inner-img">
              <view :class="getMovedateStatusCls[index]">{{ getMovedateStatus[index] }}</view>
              <image class="_img" :src="$api.getImgUrl(item.movePic)" mode="aspectFill"></image>
            </view>
            <view class="_content-inner-detail">
              <view class="_content-inner-detail-item">
                <view class="_content-inner-detail-item-info">
                  <view class="lables">主办方：{{ item.moveOrg }}</view>
                  <view class="lables">活动时间：{{ item.startTime }}</view>
                  <view class="lables"  v-if="item.activityCategory !== 3">地点：{{ item.moveAddr }}</view>
                  <view class="lables code" v-if="item.movedateStatus != 3 && item.movedateStatus != 1&&item.activityCategory !== 3"
                  >签到码：{{ item.movedateCode }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="myInviteTeachers-page-main-item-bottom"
          v-if="item.movedateStatus != 3 && item.movedateStatus != 1"
        >
          <view class="myInviteTeachers-page-main-item-bottom-text"
            ><text
              ><text class="pf"
                ><img
                  src="/static/img/fen.png"
                  v-for="(item1, index1) in item.commentStar"
                  :key="index1" /></text></text
          ></view>
          <view class="myInviteTeachers-page-main-item-bottom-text">
            <button type="warn" size="mini"   class="r10">详情</button>
            <button type="default" class="r10" size="mini" v-if="item.movedateStatus >= 4"
              >已签到</button
            >
            <button
              type="warn"
              class="r10"
              size="mini"
              v-if="item.movedateStatus < 3&&item.activityCategory !== 3"
              @click.stop="$api.handleMenu(`/pages/myqd/myqd?id=${item.id}`)"
              >未签到</button
            ><!-- v-if="isShow(item.startTime,item.movedateStatus)"-->
            <button type="default" size="mini" v-if="item.movedateStatus >= 5">已评价</button>
            <button
                @click.stop="$api.handleMenu(`/pages/myevaluation/myevaluation?id=${item.id}`)"
              type="warn"
              size="mini"
              v-else
              >未评价</button>
          </view>
        </view>
      </view>
    </view>

    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import { gpMoveMyList } from '@/api/move'
  import {  getDictItemstList } from '@/api/dict'
  import {getUpdateDate} from '@/common/type'
  export default {
    data() {
      return {
        incomeArr: ['全部'],//展示分类名称
        incomeVal: [''],//展示分类id
        incomeIndex: 0,//下拉分类索引
        pageSize: 30,//多少条
        pageNo: 1,//第几页
        list: [],//数据
      }
    },
    onLoad() {
    },
    onShow() {
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
      this.getDictItemstList()
      this.getList()
    },
    computed:{
      //预约审核状态
      getMovedateStatus(){
        const list = ['待审核', '预约成功', '预约失败', '签到成功', '评价成功']
        return this.list.map((item)=>{
          return list[item.movedateStatus-1]
        })
      },
      //预约审核状态样式
      getMovedateStatusCls(){
        let status=[2,4,5]
        return this.list.map((item)=>{
          if(status.includes(item.movedateStatus)){
            return 'typecalss ysh'
          }else {
            return 'typecalss wsh'
          }
        })
      }
    },
    methods: {
      //3是直播页面
      onRouter({activityCategory,id}){
        if (activityCategory === 1) {
          uni.navigateTo({
            url: `/pages/activityDetail/activityDetail?id=${id}&values=1`,
          })
        } else if(activityCategory===2) {
          uni.navigateTo({
            url: `/pages/grabBenefits/grabBenefits?id=${id}&values=1`,
          })
        } else {
          uni.navigateTo({
            url: `/pages/livePreview/livePreview?id=${id}&values=1`,
          })
        }
      },
      //活动类型
      getDictItemstList() {
        var that = this
        const params = { column: 'sorting', order: 'desc',dictCode:'move_type' }
        getDictItemstList(params).then((res) => {
          if (res.success) {
            that.incomeArr = ['全部']
            that.incomeVal = ['']
            res.result.forEach((ele) => {
              that.incomeArr.push(ele.text)
              that.incomeVal.push(ele.value)
            })
          }
        })
      },
      //列表数据
      getList() {
        var that = this
        const params = {
          moveType: that.incomeVal[that.incomeIndex],
          column: 'createTime',
          order: 'desc',
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
        gpMoveMyList(params).then((res) => {
          const {code,result}= res
          if (code===200) {
            that.list = []
            result.forEach((ele) => {
              ele.startTime = that.getUpdateDate(ele.startTime)
              that.list.push(ele)
            })
          }
        })
      },
      isShow(time, movedateStatus) {
        var date = new Date()
        var fRet = false
        if (movedateStatus < 4 && Date.parse(time) < date.getTime()) fRet = true
        return fRet
      },
      //活动种类选择
      incomeChangePicker(e) {
        this.incomeIndex = e.target.value
        this.getList()
      },
      //更新时间
      getUpdateDate(e) {
        return getUpdateDate(e)
      },
    },
  }
</script>

<style lang="scss">
  .typecalss {
    position: absolute;
    z-index: 10;
    padding: 5rpx 10rpx;
    background-color: #e64340;
    color: #ffffff;
    border-radius: 10rpx 0 10rpx 0;
    font-size: 20rpx;
  }
  .dsh {
    background-color: #e64340;
  }
  .ysh {
    background-color: #22d100;
  }
  .myInviteTeachers-page {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 200rpx;
    background-color: #efeff4;
    line-height: 42rpx;
    min-height: 100vh;
    .top-fixed {
      position: fixed;
      top: 0;
      z-index: 1;
    }
    .top {
      width: 100%;
      height: 100rpx;
      padding: 0 30rpx;
      // background-color: #007AFF;
      background-color: #f7f7f7;
      box-shadow: 0 1px 6rpx #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .top-text {
        color: #000;
        font-size: 34rpx;
      }
    }
    .top-box {
      width: 100%;
      height: 100%;
      position: relative;
      text-align: center;
      line-height: 100rpx;
      .back-img {
        width: 44rpx;
        height: 40rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-left: 0rpx;
      }
    }
    .myInviteTeachers_select {
      padding: 30rpx 30rpx 0 30rpx;
      font-size: 32rpx;
      display: flex;
      flex-direction: row;
      .myInviteTeachers_select-lable {
        margin-top: 15rpx;
      }
      .myInviteTeachers_select_item {
        color: #000;
        width: 200rpx;
        border: 1px solid #cccccc;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        background-color: #ffffff;
        font-size: 30rpx;
        .drop-dowm-img {
          width: 30rpx;
          height: 30rpx;
          margin-left: 10rpx;
          float: right;
        }
      }
    }
    .myInviteTeachers-page-main {
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      .myInviteTeachers-page-main-item {
        width: 100%;
        border-radius: 4rpx;
        background-color: white;
        background-clip: padding-box;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
        margin-top: 30rpx;
        .myInviteTeachers-page-main-item-header {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          min-height: 88rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          font-size: 34rpx;
          border-radius: 4rpx 4rpx 0 0;
          border-bottom: 1px solid rgba(200, 199, 204, 0.5);
          ._item-header-title {
          }
        }
        .myInviteTeachers-page-main-item-content {
          font-size: 28rpx;
          position: relative;
          .myInviteTeachers-page-main-item-content-inner {
            position: relative;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            ._content-inner-img {
              width: 160rpx;
              height: 160rpx;
              border-radius: 10rpx;
              ._img {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
              }
            }
            ._content-inner-detail {
              width: calc(100% - 160rpx);
              ._content-inner-detail-item {
                ._content-inner-detail-item-badge {
                  margin-left: 20rpx;
                  ._content-inner-detail-item-badge-text {
                    margin: 0 10rpx;
                    font-size: 24rpx;
                    padding: 10rpx 20rpx;
                    background-color: #f0ad4e;
                    color: #fff;
                    border-radius: 40rpx;
                    box-sizing: border-box;
                  }
                }
                ._content-inner-detail-item-info {
                  padding: 0 0 0 20rpx;
                  box-sizing: border-box;
                  .lables {
                    padding-left: 0rpx;
                  }
                  .code{
                    font-weight: bold;
                    font-size: 34rpx;
                  }
                }
              }
            }
          }
        }
        .myInviteTeachers-page-main-item-bottom {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          min-height: 88rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          border-top: 1px solid rgba(200, 199, 204, 0.5);
          .myInviteTeachers-page-main-item-bottom-text {
            color: #6d6d72;
            border-radius: 0 0 4rpx 4rpx;
            font-size: 28rpx;
            button{
              width: 140rpx;
              white-space: nowrap;
              padding:0;
            }
            .pf {
              img {
                width: 40rpx;
              }
            }
          }
        }
      }
    }

    .r10 {
      margin-right: 10rpx;
    }
  }
</style>
